<template>
	<z-paging
		show-refresher-update-time
		show-refresher-when-reload
		v-model="serviceList"
		bg-color="#f5f5f5"
		class="app app-bg"
		ref="paging"
		@query="queryList"
	>
		<view class="item" v-for="item in serviceList" :key="item._id">
			<u-image border-radius="14" height="190" width="190" :src="item.thumb"></u-image>
			<view class="info">
				<text class="title">{{ item.title }}</text>
				<view class="time">
					<u-icon name="clock-fill" size="30" color="#24C388"></u-icon>
					<text style="flex: 1">{{ item.time }}分钟</text>
					<view class="btn" @tap="select(item)">立即预约</view>
				</view>
				<view class="money">
					<text class="now">{{ vk.pubfn.priceFilter(item.price) }}</text>
					<text class="base">￥{{ vk.pubfn.priceFilter(item.market_price) }}</text>
					<text style="padding-right: 6rpx">已售{{ count(item) }}</text>
				</view>
			</view>
		</view>
	</z-paging>
</template>

<script>
var vk = uni.vk // vk依赖

export default {
	data() {
		return {
			sid: "",
			serviceList: []
		}
	},
	onLoad(options = {}) {
		if (options.id) {
			this.sid = options.id
		} else {
			vk.toast("参数不足", "none", 1000, () => {
				vk.navigateBack()
			})
		}
	},
	methods: {
		count(item) {
			let a = item.sell_count || 0
			let b = item.create_count || 0
			return a + b
		},
		// 查询商品列表
		queryList(pageIndex, pageSize) {
			vk.callFunction({
				url: "client/pub.getProjectList",
				data: { pageSize, pageIndex, shifu: this.sid }
			}).then(res => {
				this.$refs.paging.complete(res.rows)
			})
		},
		// 立即预约
		select(item) {
			vk.redirectTo(`/pages/project/order-create?sid=${this.sid}&pid=${item._id}`)
		}
	}
}
</script>

<style lang="scss" scoped>
.item {
	background-color: #fff;
	border-radius: 12rpx;
	padding: 20rpx;
	margin: 20rpx;
	display: flex;
	align-items: center;
}

.info {
	padding-left: 22rpx;
	flex: 1;

	.title {
		font-size: 30rpx;
		font-weight: bold;
	}

	.time {
		display: flex;
		align-items: flex-start;
		font-size: 24rpx;
		color: #999999;
		padding: 14rpx 0 26rpx;

		.u-icon {
			margin: 2rpx 6rpx 0 0;
		}

		.btn {
			font-size: 28rpx;
			color: #ffffff;
			padding: 6rpx 20rpx;
			background-color: #24c388;
			border-radius: 28rpx;
		}
	}

	.money {
		color: #999999;
		font-size: 24rpx;
		display: flex;
		align-items: flex-start;

		.now {
			color: #ff5555;
			font-size: 36rpx;
			font-weight: bold;
			margin-top: -4rpx;

			&::before {
				content: "￥";
				font-size: 24rpx;
				font-weight: normal;
			}
		}

		.base {
			text-decoration: line-through;
			margin: 0 8rpx;
			flex: 1;
		}
	}
}
</style>
